<div class="content">
    <div id="example_title">
        <h1>Drop Down Lists</h1>
        Drop downs extend HTML's input conrol with a drop down menu where you can select an item. Full keyboard support is
        implemented.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div style="height: 20px"></div>

<div class="w2ui-field w2ui-span4">
    <label>List</label>
    <div>
        <input type="list" placeholder="Type to search">
        <span class="legend">Cannot enter arbitrary text, but only items from the list</span>
    </div>
</div>
<div style="height: 10px"></div>

<div class="w2ui-field w2ui-span4">
    <label>Combo</label>
    <div> <input type="combo"> <span class="legend">You can enter any text</span> </div>
</div>

<div style="height: 20px"></div>
<style>
.w2ui-field input {
    width: 200px;
}
.w2ui-field > div > span {
    margin-left: 20px;
}
</style>

<!--CODE-->
<script type="module">
import { w2field, query, w2menu } from '__W2UI_PATH__'

let people = [
    'George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan', 'James Madison',
    'Abraham Lincoln', 'James Monroe', 'Andrew Johnson', 'John Adams', 'Ulysses Grant', 'Andrew Jackson',
    'Rutherford Hayes', 'Martin Van Buren', 'James Garfield', 'William Harrison', 'Chester Arthur',
    'John Tyler', 'Grover Cleveland', 'James Polk', 'Benjamin Harrison', 'Zachary Taylor', 'Grover Cleveland',
    'Millard Fillmore', 'William McKinley', 'Franklin Pierce', 'Theodore Roosevelt', 'John Kennedy',
    'William Howard', 'Lyndon Johnson', 'Woodrow Wilson', 'Richard Nixon', 'Warren Harding', 'Gerald Ford',
    'Calvin Coolidge', 'James Carter', 'Herbert Hoover', 'Ronald Reagan', 'Franklin Roosevelt', 'George Bush',
    'Harry Truman', 'William Clinton', 'Dwight Eisenhower', 'George W. Bush', 'Barack Obama'
]
people.sort()

new w2field('list', {
    el: query('input[type=list]')[0],
    items: people,
    match: 'contains',
    markSearch: true,
    onSelect(event) {
        console.log('Selected:', event.detail.item)
    }
})
new w2field('combo', {
    el: query('input[type=combo]')[0],
    items: people,
    match: 'contains',
    markSearch: true
})
</script>